<template>
  <view class="depot-detail">
    <!-- 顶部图片 -->
    <view class="top-banner">
      <image :src="depot.image" class="banner-img"></image>
      <view class="back-btn" @click="handleBack">
        <uni-icons type="arrowleft" size="24" color="#fff"></uni-icons>
      </view>
    </view>
    
    <!-- 站点信息 -->
    <view class="depot-info">
      <view class="depot-header">
        <text class="depot-name">{{depot.name}}</text>
        <view class="rating">
          <uni-icons type="star-filled" size="16" color="#FFD700"></uni-icons>
          <text>{{depot.rating}} ({{depot.reviews}}条评价)</text>
        </view>
      </view>
      
      <view class="depot-location">
        <uni-icons type="location" size="16" color="#999"></uni-icons>
        <text>{{depot.address}}</text>
      </view>
      
      <view class="depot-hours">
        <uni-icons type="clock" size="16" color="#999"></uni-icons>
        <text>营业时间：{{depot.hours}}</text>
      </view>
      
      <view class="depot-tags">
        <view class="tag orange-tag">行李寄存</view>
        <view class="tag orange-tag">24小时监控</view>
        <view class="tag orange-tag">免费取送</view>
      </view>
    </view>
    
    <!-- 箱型选择 -->
    <view class="section">
      <view class="section-header">
        <text class="section-title">选择箱型</text>
      </view>
      
      <view class="locker-types">
        <view 
          class="locker-item"
          v-for="(item, index) in lockerTypes"
          :key="index"
          :class="{active: activeLocker === item.type}"
          @click="activeLocker = item.type"
        >
          <view class="locker-icon">
            <image :src="item.icon" mode="aspectFit"></image>
          </view>
          <text class="locker-name">{{item.name}}</text>
          <text class="locker-price">¥{{item.price}}/小时起</text>
          <text class="locker-desc">{{item.desc}}</text>
        </view>
      </view>
    </view>
    
    <!-- 服务说明 -->
    <view class="section">
      <view class="section-header">
        <text class="section-title">服务说明</text>
      </view>
      
      <view class="service-list">
        <view class="service-item">
          <uni-icons type="info" size="16" color="#FF7F00"></uni-icons>
          <text class="service-text">免费取消：使用前1小时可免费取消</text>
        </view>
        <view class="service-item">
          <uni-icons type="info" size="16" color="#FF7F00"></uni-icons>
          <text class="service-text">行李安全：全程监控，丢失赔付</text>
        </view>
        <view class="service-item">
          <uni-icons type="info" size="16" color="#FF7F00"></uni-icons>
          <text class="service-text">24小时服务：随时存取行李</text>
        </view>
      </view>
    </view>
    
    <!-- 底部操作栏 -->
    <view class="action-bar">
      <view class="price-info">
        <text class="price">¥{{selectedPrice}}</text>
        <text class="unit">/小时起</text>
      </view>
      <view class="action-btn" @click="handleBook">立即预订</view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      depot: {
        id: 1,
        name: '市中心火车站寄存点',
        image: 'https://images.unsplash.com/photo-1544620347-c4fd4a3d5957?crop=entropy&cs=tinysrgb&fit=crop&fm=jpg&h=400&w=750',
        address: '火车站东广场B1层',
        hours: '06:00-23:00',
        rating: 4.8,
        reviews: 128
      },
      lockerTypes: [
        {
          type: 'small',
          name: '小箱型',
          icon: '/static/large.png',
          price: 6,
          desc: '20寸以下行李箱'
        },
        {
          type: 'medium',
          name: '中箱型',
          icon: '/static/middle.png',
          price: 8,
          desc: '24寸行李箱'
        },
        {
          type: 'large',
          name: '大箱型',
          icon: '/static/small.png',
          price: 10,
          desc: '28寸行李箱'
        }
      ],
      activeLocker: 'medium'
    }
  },
  computed: {
    selectedPrice() {
      const locker = this.lockerTypes.find(item => item.type === this.activeLocker);
      return locker ? locker.price : 8;
    }
  },
  methods: {
    handleBack() {
      uni.navigateBack();
    },
    handleBook() {
      uni.navigateTo({
        url: '/pages/order/confirm'
      })
    }
  }
}
</script>

<style lang="scss">
$primary-color: #FF7F00;
$light-orange: #FFF5EB;
$dark-orange: #E67300;

.depot-detail {
  padding-bottom: 60px;
}

.top-banner {
  position: relative;
  height: 220px;
  
  .banner-img {
    width: 100%;
    height: 100%;
  }
  
  .back-btn {
    position: absolute;
    top: 10px;
    left: 10px;
    width: 36px;
    height: 36px;
    background: rgba(0,0,0,0.3);
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
  }
}

.depot-info {
  padding: 15px;
  background: #fff;
  
  .depot-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 10px;
  }
  
  .depot-name {
    font-size: 18px;
    font-weight: bold;
    color: #333;
  }
  
  .rating {
    display: flex;
    align-items: center;
    font-size: 14px;
    color: #666;
    
    text {
      margin-left: 3px;
    }
  }
  
  .depot-location,
  .depot-hours {
    display: flex;
    align-items: center;
    font-size: 14px;
    color: #666;
    margin-bottom: 8px;
    
    text {
      margin-left: 5px;
    }
  }
  
  .depot-tags {
    display: flex;
    flex-wrap: wrap;
    margin-top: 10px;
    
    .tag {
      font-size: 12px;
      padding: 4px 8px;
      border-radius: 4px;
      margin-right: 8px;
      margin-bottom: 8px;
    }
    
    .orange-tag {
      background-color: $light-orange;
      color: $dark-orange;
    }
  }
}

.section {
  background-color: #fff;
  margin: 10px 0;
  padding: 15px;
  
  .section-header {
    margin-bottom: 15px;
  }
  
  .section-title {
    font-size: 16px;
    font-weight: bold;
    color: #333;
  }
}

.locker-types {
  display: flex;
  justify-content: space-between;
  
  .locker-item {
    width: 30%;
    border: 1px solid #eee;
    border-radius: 8px;
    padding: 10px;
    display: flex;
    flex-direction: column;
    align-items: center;
    
    &.active {
      border-color: $primary-color;
      background-color: $light-orange;
    }
  }
  
  .locker-icon {
    width: 60px;
    height: 60px;
    margin-bottom: 8px;
    
    image {
      width: 100%;
      height: 100%;
    }
  }
  
  .locker-name {
    font-size: 14px;
    font-weight: bold;
    margin-bottom: 5px;
  }
  
  .locker-price {
    color: $primary-color;
    font-size: 14px;
    font-weight: bold;
    margin-bottom: 5px;
  }
  
  .locker-desc {
    font-size: 12px;
    color: #999;
    text-align: center;
  }
}

.service-list {
  .service-item {
    display: flex;
    align-items: center;
    margin-bottom: 10px;
    
    .service-text {
      font-size: 14px;
      margin-left: 8px;
    }
  }
}

.action-bar {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  height: 60px;
  background: #fff;
  display: flex;
  align-items: center;
  padding: 0 15px;
  box-shadow: 0 -2px 10px rgba(0,0,0,0.1);
  
  .price-info {
    flex: 1;
    
    .price {
      color: $primary-color;
      font-size: 20px;
      font-weight: bold;
    }
    
    .unit {
      font-size: 12px;
      color: #999;
      margin-left: 3px;
    }
  }
  
  .action-btn {
    width: 140px;
    height: 44px;
    background: $primary-color;
    border-radius: 22px;
    color: #fff;
    font-size: 16px;
    font-weight: bold;
    display: flex;
    justify-content: center;
    align-items: center;
  }
}
</style>